export default {
    mutations: {
        lock({ curComponent }) {
            curComponent.isLock = true
        },

        unlock({ curComponent }) {
            curComponent.isLock = false
        },

        moveLeft( { curComponent, areaData } ) {
            if( curComponent ) {
                curComponent.style.left = curComponent.style.left - 1
            }
            if( areaData.components.length > 0 ){
                // console.log( "many left" )
                areaData.components.forEach(component => {
                    component.style.left = component.style.left - 1
                })
            }
            
        },
        moveRight( { curComponent, areaData } ) {
            if( curComponent ) {
                curComponent.style.left = curComponent.style.left + 1
            }
            if( areaData.components.length > 0 ){
                // console.log( "many left" )
                areaData.components.forEach(component => {
                    component.style.left = component.style.left + 1
                })
            }
            
        },        
        moveUp( { curComponent , areaData} ) {
            if( curComponent ) {
                curComponent.style.top = curComponent.style.top - 1
            }
            if( areaData.components.length > 0 ){
                // console.log( "many left" )
                areaData.components.forEach(component => {
                    component.style.top = component.style.top - 1
                })
            }
        },        
        moveDown( { curComponent, areaData } ) {
            if( curComponent ) {
                curComponent.style.top = curComponent.style.top + 1
            }
            if( areaData.components.length > 0 ){
                // console.log( "many left" )
                areaData.components.forEach(component => {
                    component.style.top = component.style.top + 1
                })
            }
        },                        
    },
}